<template>
  <div>
    <el-table
      :data="list"
      :header-row-class-name="tableRowClassName"
    >
      <el-table-column
        label="分类名称"
        align="center"
      >
        <template slot-scope="scope" >
            {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ new Date(scope.row.createTime).toLocaleDateString() }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index,scope.row.typeName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <addCategory ref="addCate"/>
    <editCategory ref="editCate" @editData="editData"/>
  </div>
</template>

<script>
/*eslint-disable*/
import {delDate,editdate,editdate1,checkOnly} from "@/utils/category"
import addCategory from "../Dialog/addCategory";
import editCategory from "../Dialog/EditCategory";
  export default {
    name: "CategoryList",
    data() {
      return {
      }
    },
    props: {
      list: {
        type: Array,
        default: []
      },
    },
    methods: {
      tableRowClassName({rowIndex}){
        if (rowIndex === 0) {
          return 'warning-row';
        }
      },
      handleEdit(index) {
        this.$refs.editCate.changeVisible('编辑分类',index);
      },
      async editData(data){
        let res=await checkOnly(`/porcelainType/check/${data.name}`)
        if (res.data.length<=0){
          let typeCode=this.list[data.index].typeCode;
          editdate1(`/porcelainType/${data.name}/${typeCode}`)
            .then(rawRes=>rawRes.data)
            .then(res=>{
              console.log(res);
            })
          this.list[data.index].typeName=data.name
          this.$refs.editCate.dialogFormVisible=false;
        }else{
          this.$message({
            message: '分类以存在',
            type: 'warning'
          });
        }
      },
      handleDelete(index,name) {
        this.$confirm('确定删除该分类吗?', '删除提示!', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            let id=this.list[index].typeCode;
            delDate(`/porcelainType/${id}`,{})
              .then(rawRes=>rawRes.data).then(res=>{
              console.log(res);
            })
            this.list.splice(index,1);
            console.log(data);
          })
          .catch(action => {
            if (action!='cancel'){
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            }
          });
      },
    },
    components:{
      addCategory,
      editCategory
    }
  }
</script>

<style scoped>

</style>
